<!-- navigationBar.vue -->
<template>
  <!-- <view class="custom-navbar" style="height: 87px;"> -->
  <view class="custom-navbar" :style="navbarStyle">
    <!-- <view class="navbar-content" style="padding-top: 51px;"> -->
    <view class="navbar-content" :style="navbarContentStyle">
      <!-- 左侧区域 -->
      <view class="navbar-left">
        <view v-if="showBack" class="nav-btn" @click="handleBack">
          <u-icon name="arrow-left" size="20" :color="color"></u-icon>
        </view>
        <view v-if="showHome" class="nav-btn nav-home-btn" @click="handleHome">
          <u-icon name="home" size="20" :color="color"></u-icon>
        </view>
      </view>
      
      <!-- 标题区域 -->
      <view class="navbar-title">
        <text class="title-text" :style="{ color: color }">{{ title }}</text>
      </view>
      
      <!-- 右侧区域 -->
      <view class="navbar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'navigationBar',
  props: {
    title: {
      type: String,
      default: '页面标题'
    },
    showBack: {
      type: Boolean,
      default: true
    },
    showHome: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    color: {
      type: String,
      default: '#333333'
    }
  },
  data() {
    return {
      totalHeight: 0,
      paddingTop: 0,
    };
  },
  computed: {
    navbarStyle() {
      return {
        height: this.totalHeight + 'px'
      };
    },
    navbarContentStyle() {
      return {
        paddingTop: this.paddingTop + 'px'
      };
    }
  },
  mounted() {
    this.getSystemInfo();
  },
  methods: {
    getSystemInfo() {
      try {
        // 获取胶囊按钮信息（小程序）
        // #ifdef MP-WEIXIN
        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮信息:', menuButtonInfo);//top24
        
        if (menuButtonInfo) {
          // 正确计算导航栏高度
          // 胶囊按钮顶部到状态栏底部的距离 * 2 + 胶囊按钮高度
          this.totalHeight = menuButtonInfo.top + 36;
          this.paddingTop = menuButtonInfo.top
          console.log('计算后的导航栏高度:', this.totalHeight);
          console.log('计算后的距上高度:', this.paddingTop);
          console.log('1:', this.navbarStyle);
          console.log('2:', this.navbarContentStyle);
        } else {
          // 如果没有胶囊按钮信息，使用默认值
          this.totalHeight = 44;
        }
        // #endif
        
        // 将高度信息发送给父组件
        this.$emit('heightChange', {
          paddingTop: this.paddingTop,
          totalHeight: this.totalHeight
        });
        
      } catch (e) {
        console.error('获取系统信息失败', e);
        // 默认值
        this.paddingTop = 44;
        this.totalHeight = 88;
      }
    },
    handleBack() {
      this.$emit('back');
      uni.navigateBack();
    },
    handleHome() {
      this.$emit('home');
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.navbar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.navbar-title {
  flex: 2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
}

.navbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.nav-btn {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-home-btn {
  margin-left: 10px;
}
</style>